<template>
  <div>
    <div style="margin: 30px">
      <el-button @click.stop="exportWord" type="primary" size="small"
      >导出并下载word
      </el-button
      >
      <br/>
      <br/>
      <!-- <div v-for="(item, index) in xmlist" :key="index">
            {{ item.xm}}
        {{ item.js}}
            </div> -->

      <!-- <div v-for="(item, index) in xmlist1" :key="index">

        {{ item}}
         </div> -->


      <el-table :data="orderlist" border style="width: 90%" :highlight-current-row="true">

        <el-table-column
          prop="sport_name_user"
          label="学号"
          label-width="120px"
        >
        </el-table-column>
        <el-table-column prop="nick_name" label="姓名" label-width="120px">
        </el-table-column>
        <el-table-column prop="sex" label="性别" label-width="120px">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 0">
              <span>男</span>
            </span>
            <span v-if="scope.row.sex == 1">
              <span>女</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="declare_xm_name"
          label="项目名称"
          label-width="120px"
        >
        </el-table-column>
        <el-table-column prop="dept_name" label="专业"></el-table-column>
      </el-table>


    </div>
  </div>
</template>

<script>
  import {ordervolumsgetlist} from "@/api/ordervolums/ordervolums";
  // 引入上面安装的四个依赖

  import JSZipUtils from "jszip-utils";
  import JSZip from "pizzip";
  import Docxtemplater from "docxtemplater";
  import {saveAs} from "file-saver";

  export default {
    name: "",
    data() {
      return {
        form: {title: "学生报名信息秩序表"},
        orderlist: [],
        xmlist: [],
        xmlist1: [],
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.loading = true;
        ordervolumsgetlist().then((response) => {
          this.orderlist = response;

          let xmlist = []
          let xmlist1 = []
          for (let i = 0; i < response.length; i++) {
            // console.log(response[i].declare_xm_name,i);

            xmlist.push({xm: response[i].declare_xm_name, js: i});
            xmlist1.push(response[i].declare_xm_name, i);
          }
          this.xmlist = xmlist;
          let arrs = [...new Set(xmlist1)]; //项目名称去重复
          this.xmlist1 = arrs;
        });
      },
      exportWord() {
        let orderlist = this.orderlist;
        let form = this.form;
        JSZipUtils.getBinaryContent("/template.docx", function (error, content) {
          // 抛出异常
          if (error) {
            throw error;
          }
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new JSZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new Docxtemplater().loadZip(zip);
          // 设置模板变量的值
          doc.setData({
            ...form,
            orderlist,
          });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            // let e = {
            //   message: error.message,
            //   name: error.name,
            //   stack: error.stack,
            //   properties: error.properties,
            // }
            this.$message.error("导出报表失败");
            throw error;
          }

          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: "blob",
            mimeType:
              "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, "初始(1)版本_秩序表.docx");
        });
      },
    },
  };
</script>

<style>
</style>
